<template>
    <el-button
        class="sc-small sc-pt-3 sc-pb-3 sc-pl-8 sc-pr-8"
        :class="classNameVm"
        @click="handleClick"
    >
        <slot></slot>
    </el-button>
</template>

<script>
export default {
    name: "ScRadioButton",
    props: {
        value: {
            type: [String, Number]
        },
        label: {
            type: [String, Number]
        },
        className: {
            type: String,
            default: "sc-btn-ghost-normal"
        },
        hoverClassName: {
            type: String,
            default: "sc-btn-minor"
        },
        /** 是否能够再次点击取消选中 */
        cancelAble: {
            type: Boolean
        }
    },
    computed: {
        classNameVm() {
            if (this.value == this.label) {
                return this.hoverClassName;
            } else {
                return this.className;
            }
        }
    },
    methods: {
        handleClick() {
            //再次点击，取消选中
            if (this.cancelAble && this.value === this.label) {
                this.$emit("input", null);
                return;
            }
            this.$emit("input", this.label);
        }
    }
};
</script>
